import React from 'react';
import './index.scss';

class Details extends React.Component {
  render() {
    return (
      <div>
        {/* header */}
        <div className="app-dps8r">
          <div className="index-2guaN">
            <nav className="index-2g0nR index-2TCKU">
              <i className="iconfont icon-arrow-right-copy-copy-copy"></i>
            </nav>

            <div className="index-ccm5A">

              <div className="index-3X8sl">
                <img className="index-3eDRn" alt="" src="//fuss10.elemecdn.com/9/30/8ccf4d4162e1d9a16131360aa790fpng.png?imageMogr/format/webp/thumbnail/150x/" />
              </div>

              <div className="index-2uv7r">
                <h2 className="index-3jRsK">
                  <span className="index-UYhnL">玉媛营养早餐</span>
                  <i className="index-1_VRD"></i>
                </h2>
                <div className="index-24KTi">
                  <span className="index-2u0xV">评价4.6</span>
                  <span className="index-2u0xV">月售982单</span>
                  <span className="index-2u0xV">蜂鸟快送<span>约45分钟</span></span>
                </div>
              </div>

              {/* <div class="index-3Zu2B">
                <div ubt-click="102425" class="index-2R-Ax index-Y5OU8">
                  <p class="index-3woYK">
                    <span class="index-2sM0U"><small>¥</small>7</span>
                    <span>
                      <svg class="index-30ifM">
                        <use xlink:href="#svip-icon"></use>
                      </svg>无门槛
                    </span>
                  </p>
                  <p class="index-Omlr_">领取</p>
                </div>
              </div> */}

              <div ubt-click="101178" className="index-2Ea3o">
                <div className="index-2Gi26">
                  <div className="activity-1hPHa activity-2JHFT">
                    <span className="mini-tag-1Lyw4 activity-N5WvH">满减
                        <span className="activity-yP-9y mini-tag-1ezSQ">满减</span>
                    </span>
                    <span className="activity-3dUjU">满50减2，满80减5，满120减10</span>
                  </div>
                </div>
                <div className="index-jk0Mt">1个优惠</div>
              </div>

              <p className="index-TmrYy">公告：欢迎光临，用餐高峰期请提前下单，谢谢。</p>

            </div>
          </div>
        </div>
        {/* header-end */}

        {/* tab */}
        <div id="shoptab">
          <div className="shop-tab-1MgBk">
            <div className="shop-tab-2ipt1 shop-tab-nD6jp">
              <p className="shop-tab-2H0qT" data-spm-anchor-id="a2ogi.12117545.0.i2">
                点餐
                <span className="shop-tab-1GaSq"></span>
              </p>
            </div>

            <div className="shop-tab-2ipt1">
              <p className="shop-tab-2H0qT" data-spm-anchor-id="a2ogi.12117545.0.i0">
                评价
                <span className="shop-tab-1GaSq"></span>
              </p>
            </div>

            <div className="shop-tab-2ipt1">
              <p className="shop-tab-2H0qT" data-spm-anchor-id="a2ogi.12117545.0.i1">
                商家
                <span className="shop-tab-1GaSq"></span>
              </p>
            </div>

          </div>
        </div>
        {/* tab-end */}

        {/* main */}
        <div>
          <div class="recommend-1M-lc">
            <div>
              <p class="recommend-1kbzU">商家推荐</p>
              <div class="recommend-38t08">
                <div class="recommend-1U7u5">
                  {/* 每个推荐 */}
                  <div class="recommend-3EB-z">
                    <img alt="" class="recommend-16ZqP" src="//fuss10.elemecdn.com/4/88/60d1ce891624f1e0d39b756ca71d5jpeg.jpeg?imageMogr/format/webp/thumbnail/240x/" />
                    <div>
                      <p class="food-card-1ppXR">正宗杭州小笼包</p>
                      <p class="food-card-3O1zm">月售423 好评率100%</p>
                      <div class="food-card-2h4ZL">
                        <p class="food-card-wVKdM"><small>¥</small>6.8</p>
                        <span class="cartbutton-entitybutton_9fUdS">
                          <use xlinkHref="#cart-minus" data-spm-anchor-id="a2ogi.12117545.0.i0">
                            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                              <path fill="none" d="M0 0h44v44H0z"></path>
                              <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                            </svg>
                          </use>
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 每个推荐 */}
                  <div class="recommend-3EB-z">
                    <img alt="" class="recommend-16ZqP" src="//fuss10.elemecdn.com/4/88/60d1ce891624f1e0d39b756ca71d5jpeg.jpeg?imageMogr/format/webp/thumbnail/240x/" />
                    <div>
                      <p class="food-card-1ppXR">正宗杭州小笼包</p>
                      <p class="food-card-3O1zm">月售423 好评率100%</p>
                      <div class="food-card-2h4ZL">
                        <p class="food-card-wVKdM"><small>¥</small>6.8</p>
                        <span class="cartbutton-entitybutton_9fUdS">
                          <use xlinkHref="#cart-minus" data-spm-anchor-id="a2ogi.12117545.0.i0">
                            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                              <path fill="none" d="M0 0h44v44H0z"></path>
                              <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                            </svg>
                          </use>
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 每个推荐 */}
                  <div class="recommend-3EB-z">
                    <img alt="" class="recommend-16ZqP" src="//fuss10.elemecdn.com/4/88/60d1ce891624f1e0d39b756ca71d5jpeg.jpeg?imageMogr/format/webp/thumbnail/240x/" />
                    <div>
                      <p class="food-card-1ppXR">正宗杭州小笼包</p>
                      <p class="food-card-3O1zm">月售423 好评率100%</p>
                      <div class="food-card-2h4ZL">
                        <p class="food-card-wVKdM"><small>¥</small>6.8</p>
                        <span class="cartbutton-entitybutton_9fUdS">
                          <use xlinkHref="#cart-minus" data-spm-anchor-id="a2ogi.12117545.0.i0">
                            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                              <path fill="none" d="M0 0h44v44H0z"></path>
                              <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                            </svg>
                          </use>
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 每个推荐 */}
                  <div class="recommend-3EB-z">
                    <img alt="" class="recommend-16ZqP" src="//fuss10.elemecdn.com/4/88/60d1ce891624f1e0d39b756ca71d5jpeg.jpeg?imageMogr/format/webp/thumbnail/240x/" />
                    <div>
                      <p class="food-card-1ppXR">正宗杭州小笼包</p>
                      <p class="food-card-3O1zm">月售423 好评率100%</p>
                      <div class="food-card-2h4ZL">
                        <p class="food-card-wVKdM"><small>¥</small>6.8</p>
                        <span class="cartbutton-entitybutton_9fUdS">
                          <use xlinkHref="#cart-minus" data-spm-anchor-id="a2ogi.12117545.0.i0">
                            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                              <path fill="none" d="M0 0h44v44H0z"></path>
                              <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                            </svg>
                          </use>
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 每个推荐 */}
                  <div class="recommend-3EB-z">
                    <img alt="" class="recommend-16ZqP" src="//fuss10.elemecdn.com/4/88/60d1ce891624f1e0d39b756ca71d5jpeg.jpeg?imageMogr/format/webp/thumbnail/240x/" />
                    <div>
                      <p class="food-card-1ppXR">正宗杭州小笼包</p>
                      <p class="food-card-3O1zm">月售423 好评率100%</p>
                      <div class="food-card-2h4ZL">
                        <p class="food-card-wVKdM"><small>¥</small>6.8</p>
                        <span class="cartbutton-entitybutton_9fUdS">
                          <use xlinkHref="#cart-minus" data-spm-anchor-id="a2ogi.12117545.0.i0">
                            <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%">
                              <path fill="none" d="M0 0h44v44H0z"></path>
                              <path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
                            </svg>
                          </use>
                        </span>
                      </div>
                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>
          
          <div>
            下拉
          </div>
        </div>
        {/* main-end */}
      </div>
    )
  }
}

export default Details;